<template>
  <div>
    <el-collapse accordion>
  <el-collapse-item>
    <template slot="title">
     <el-row>
  <el-col :span="8">
    <div class="grid-content bg-purple">
      {{airData.airline_name}} {{airData.flight_no}}
    </div>
    </el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple-light transit-time">
      <div class='depart'>
        <div class='depart-time'>{{airData.dep_time}}</div>
        <div class='airport'>{{airData.org_airport_name}} <i>T1</i></div>
      </div>
      <div class='total-time'>
        <span>{{duration}}</span>
      </div>
      <div class='depart'>
       <div class='depart-time'>{{airData.arr_time}}</div>
        <div class='airport'>{{airData.dst_airport_name}} <i>T2</i></div>
      </div>
      </div>
      </el-col>
  <el-col :span="8">
    <div class="grid-content bg-purple flight-price">
      ￥<span>{{airData.base_price}}</span>起
      </div>
      </el-col>
     </el-row>
    </template>
    <div class='recommend'>
      <div class='recommend-price'>
        <span>低价推荐</span>
      </div>
      <div class='airList'>
        <div class='airlist' v-for="(item,index) in airData.seat_infos" :key="index">
        <div class='airline'>
          <span class='seat'>{{item.name}}</span> | 
          <span class='company'>{{item.supplierName}}</span>
        </div>
        <div class='air-price'>
          <span>￥{{item.par_price}}</span>
        </div>
        <div class='select'>
          <span class='select-btn' @click="desigNate(item.seat_xid)">选定</span>
          <span>剩余:{{item.discount}}</span>
        </div>
      </div>
      </div>
    </div>
  </el-collapse-item>
</el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    airData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  computed: {
    // 计算航班时间
    duration() {
      // 获取出发时间 转化成数字格式
      // 到达的小时和分钟
      const arrHour = Number(this.airData.arr_time.split(':')[0])
      const arrMinute = Number(this.airData.arr_time.split(':')[1])

      // 出发的小时和分钟
      const depHour = Number(this.airData.dep_time.split(':')[0])
      const depMinute = Number(this.airData.dep_time.split(':')[1])

      // 计算出时间差
      let diffMinute = arrHour * 60 + arrMinute - (depHour * 60 + depMinute)
      if (diffMinute < 0) {
        // 跨过了凌晨, 需要添加 24 小时(以分钟为单位)
        diffMinute += 24 * 60
      }
      return Math.floor(diffMinute / 60) + '小时' + (diffMinute % 60) + '分钟'
    }
  },
  methods: {
    // 选择机票 携带数据跳转到机票订单页
    desigNate(seat) {
      // console.log(seat)
      // return
      this.$router.push({
        path: '/air/flightsorder',
        query: {
          id: this.airData.id,
          seat_xid: seat
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-collapse {
  margin: 15px 0;
  border-left: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  padding: 20px 0;
  ::v-deep.el-collapse-item__arrow {
    display: none;
  }
}
.el-collapse-item {
  ::v-deep.el-collapse-item__wrap {
    border-bottom: none;
  }
}
.el-collapse-item {
  ::v-deep.el-collapse-item__header {
    border-bottom: none;
  }
}
.el-row {
  width: 100%;
  height: 100%;
  .grid-content {
    display: flex;
    justify-content: center;
  }
  .transit-time {
    display: flex;
    justify-content: center;
    align-items: center;
    ::v-deep.depart {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      height: 48px;
      flex: 1;
      line-height: 0;
      div {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .depart-time {
        font-size: 24px;
        // font-weight: bold;
      }
      .airport {
        font-size: 10px;
        color: #b3a6c4;
      }
    }
    .total-time {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        padding: 20px 0;
        border-bottom: 1px solid #eeeeee;
        line-height: 0;
      }
    }
  }
  .flight-price {
    span {
      font-size: 26px;
      color: #ffa521;
      margin: 5px 3px 0;
      height: 32px;
      line-height: 32px;
    }
  }
}
.recommend {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  .recommend-price {
    padding: 0 15px;
  }
  .airList {
    flex: 1;
    .airlist {
      margin-left: 20px;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      padding: 30px 0;
      border-bottom: 1px solid #eeeeee;
      .airline {
        .company {
          font-weight: bold;
        }
        .seat {
          color: #008000;
        }
      }
      .air-price {
        font-size: 22px;
        color: #ffa54f;
      }
      .select {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        .select-btn {
          padding: 3px 24px;
          background-color: #e6a23c;
          color: #ffffff;
          border-radius: 5px;
          cursor: pointer;
        }
        .quantity {
          font-size: 12px;
        }
      }
    }
  }
}
</style>